<template>
	<view class="bg" :style="{backgroundImage:'url('+imagesurl+'/images/blueBg1.png)'}">
		<u-image src="/static/huafeitop.png" width="750" height="400" mode="widthFix"></u-image>
		<view class="content">
			<view class="c_bg" v-for="(item,index) in list" :key="index" >
		      <view class="left">
				  <view>￥<text class="price">{{item.price}}</text></view>
				  <view class="user" @click="use(item)">
				  	使用
				  </view>
			  </view>
			  <view class="right">
				  <view class="title">
				  	{{item.title}}
				  </view>
				  <view class="des">
				  	{{item.des}}
				  </view>
				  <view class="detaill" >
				  	 {{item.detaill}}
					
					
				  </view>
				  
				  <view class="detaill" style="display: flex;justify-content: space-between;" @click="aware(item)">
				     <view>可以送给好友</view>
				     <view style="color: #628DFF;">
						 送好友
					   <u-icon name="arrow-right" color="#628DFF"></u-icon>
					 </view>		
				  </view>
				   
			  </view>
			</view>
		
		</view>
		<rule></rule>
	</view>
</template>

<script>
	import url from '@/common/baseUrl.js';
	
	import rule from "../../components/rule.vue";
	export default {
		components:{
			rule
		},
		data() {
			return {
				imagesurl: url.imageUrl,
				list:[{
						price: "200",
						title:"5元话费抵扣券",
						des:"仅限888****8888用户使用",
						detaill:"好友赠送的话费券不可再次赠送",
				},{
						price: "200",
						title:"5元话费抵扣券",
						des:"仅限888****8888用户使用",
						detaill:"好友赠送的话费券不可再次赠送",
				}],
				info: {
					
				
					day: "20",
					des: "可用于购物抵现，参与拼团活动",
					number: "1",
					content: `
										<p>露从今夜白，月是故乡明</p>
										<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
									`

				},

			}
		},
		methods:{
			use(item){
				uni.navigateTo({
					url:"./use"
				})
			},
			aware(){
				uni.navigateTo({
					url:"./aware"
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		// background-image: url(../../static/blueBg.png);
		width: 100%;
		min-height: 100%;
		background-size: cover;
		display: inline-block;
	}

	.content {
		width: 690rpx;
		margin: auto;
	
		.number {
			font-size: 28rpx;
			color: #628DFF;
			text-align: center;
			margin: 50rpx 0 20rpx 0;
		}
	}
	.c_bg{
		display: flex;
		margin-bottom: 20rpx;
		
		.left{
			background-image: url(../../static/42d5fae86e8e3d91352211ee70e88bf.png);
			width: 250rpx;
			height: 250rpx;
			background-size: cover;
			text-align: center;
			color: #FFFFFF;
			 padding-top: 40rpx;
			.price{
				font-size: 80rpx;
				color: #FFFFFF;
			   
			}
			.user{
				width: 100rpx;
				height: 48rpx;
			
				background: #FFFFFF;
				border-radius: 50rpx;
				text-align: center;
				line-height: 48rpx;
				color: #FF6450;
				margin: 30rpx auto;
				font-size: 24rpx;
			}
		}
		.right{
			background-image: url(../../static/6fdfd46bdd489f7360849e3a5a8f155.png);
			width: 460rpx;
			height: 250rpx;
			background-size: cover;
			padding: 40rpx;
		
			
			.title{
				font-size: 48rpx;
				color: #FF6450;
				margin-bottom: 30rpx;
				
			}
			.des{
				font-size: 24rpx;
				color: #333;
			}
			.detaill{
				font-size: 24rpx;
				color: #333;
			}
		}
		
		
	}
	
	

	
</style>
